<template>
  <el-cascader ref="refProvinceCity" v-model="provinceCity" :props="props" :disabled="disabled" @change="getCheckedNodes" />
</template>

<script>
import { getAreaTreeList } from '@/api/common'
export default {
  props: {
    cityArr: {
      type: Array,
      required: true
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      provinceCity: [],
      nameIdArr: [],
      props: {
        expandTrigger: 'click',
        emitPath: false,
        lazy: true,
        lazyLoad: this.lazyLoad
      }
    }
  },
  created() {
    this.provinceCity = this.cityArr.length === 0 ? '' : this.cityArr
    this.nameIdArr = this.cityArr
  },
  methods: {
    getCheckedNodes() {
      const arr = this.$refs.refProvinceCity.getCheckedNodes()[0]
      this.nameIdArr = arr.path
      this.$emit('getCityArr',this.nameIdArr)
      console.log('this.nameIdArr',this.nameIdArr)
    },
    lazyLoad(node, resolve) {
      this.getData(node, resolve)
    },
    async getData(node, resolve) {
      let arr = []
      if (node.level === 0) {
        await getAreaTreeList({ code: '000000' }).then(res => {
          arr = JSON.parse(JSON.stringify(res))
          arr.forEach(item => {
            item.value = item.code
            item.label = item.name
          })
        })
      } else if (node.level === 1 || node.level === 2) {
        await getAreaTreeList({ code: node.value }).then(res => {
          res.forEach(item => {
            arr.push({
              value: item.code,
              label: item.name
            })
          })
        })
      } else {
        await getAreaTreeList({ code: node.value }).then(res => {
          res.forEach(item => {
            arr.push({
              value: item.code,
              label: item.name,
              leaf: node.level === 3
            })
          })
          // if (this.cityArr.length === 4) {
          //   this.provinceCity = this.cityArr[3]
          // }
        })
      }
      resolve(arr)
    }
  }
}
</script>

<style>

</style>
